﻿<section class="bg-white border-b py-8">

    <div class="container mx-auto m-8">
        <div class="md:grid md:grid-cols-5 md:gap-4">
            <div class="md:col-span-3 shadow border">
                <div style="width: 100%; height: 450px; position: relative;">
                    <CascadingValue Value="_diagram">
                        <DiagramCanvas>
                            <Widgets>
                                <GridWidget Size="30" Mode="GridMode.Line" BackgroundColor="white" />
                                <SelectionBoxWidget />
                            </Widgets>
                        </DiagramCanvas>
                    </CascadingValue>
                </div>
            </div>
            <div class="md:col-span-2 p-6">
                <h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">
                    SVG and HTML
                </h3>
                <p class="text-gray-600 mb-4">
                    Blazor Diagrams contains two layers, SVG and HTML.<br />
                    The HTML layer is responsible for rendering nodes only, for maximum customization and interactivity. 
                    While the SVG layer is responsible for rendering the links, but can also render nodes.
                </p>
            </div>
        </div>
    </div>
</section>